<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link rel="stylesheet" href="./element/element.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    :root {
      --animate-delay: 0.4s;
    }

    * {
      margin: 0;
      padding: 0;
      color: aliceblue;
    }

    .outer {
      position: relative;
      width: 100vw;
      height: 100%;
      background-color: #020812;
      overflow: hidden;
    }

    .box {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      display: flex;
      background-image: url('./assets/tzbt/background.jpg');
      position: relative;
      background-repeat: no-repeat;
      background-size: contain;
      width: 1920px;
      height: 1080px;
      transform-origin: 0 0;
      transition: all 0.5s ease-out;
    }

    [v-cloak] {
      display: none;
    }

    .common-top-title {
      font-size: 21.33px;
      color: #FFFFFF;
      line-height: 21.33px;
      font-family: 'SourceHanSansCN-Bold';
      font-weight: 700;
      margin-left: 6px;
    }

    .left {
      width: 450px;
      position: absolute;
      left: 0;
      bottom: 23px;
      top: 124px;
      margin-left: 24px;
      order: 1;
      background-repeat: no-repeat;
      z-index: 999;
    }

    .left-container1 {
      width: 450px;
      height: 482px;
      background: rgba(2, 2, 2, 0.40);
      padding: 20px 19px 37px 20px;
      box-sizing: border-box;
    }

    .left-container1-box {
      margin: 21px 44px 0 14px;
      display: flex;
      justify-content: space-between;
    }
    .left-container1-box-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .left-container1-box-item-value {
      height: 25px;
      font-family: 'Roboto-Bold';
      font-size: 22px;
      color: #4CEFF5;
      letter-spacing: 0;
      font-weight: 700;
    }
    .left-container1-box-item-img {
      width: 88px;
      height: 66px;
      margin-top: 17px;
    }
    .left-container1-box-item-title {
      margin-top: 17px;
      height: 40px;
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
      opacity: 0.7;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .left-container1-line {
      margin: 44px 25px 0 5px;
      display: flex;
      justify-content: space-between;
      opacity: 0.4;
    }
    .left-container1-line-item1 {
      width: 274px;
      height: 3px;
      background-image: linear-gradient(90deg, #50EFB1 0%, #00E0DB 95%);
      border-radius: 7px;
    }
    .left-container1-line-item2 {
      width: 104px;
      height: 3px;
      background-image: linear-gradient(270deg, #FC4768 0%, #F8D03F 100%);
      border-radius: 7px;
    }

    .left-container1-card {
      display: flex;
      flex-wrap: wrap;
      height: 148px;
      justify-content: space-between;
      align-content: space-between;
      margin-top: 25px;
    }
    .left-container1-card-item {
      width: 131px;
      height: 59px;
      background-image: url('./assets/tzbt/left-card.png');
      background-repeat: no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .left-container1-card-item-title {
      height: 20px;
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      color: #AAC4E3;
      letter-spacing: 0;
      font-weight: 400;
      margin-top: 6px;
    }
    .left-container1-card-item-data {
      margin-top: 3px;
    }
    .left-container1-card-item-value {
      height: 21px;
      font-family: 'Roboto-Medium';
      font-size: 18px;
      color: #52D7FF;
      letter-spacing: 0;
      font-weight: 500;
    }
    .left-container1-card-item-unit {
      height: 17px;
      font-family: 'PingFangSC-Regular';
      font-size: 12px;
      color: #9B9E9F;
      letter-spacing: 0;
      font-weight: 400;
    }

    .left-container2 {
      margin-top: 27px;
      width: 450px;
      height: 424px;
      background: rgba(2, 2, 2, 0.40);
    }

    .left-container2-top {
      padding: 20px 26px 0 26px;
      display: flex;
      justify-content: space-between;
    }

    .left-container2-bottom {
      position: relative;
      height: 364px;
      margin-top: 16px;
    }

    .center {
      flex: 1;
      order: 2;
      position: relative;
      left: 50%;
      /* top: 50%; */
      transform: translate(-50%, 0);
      transform-origin: 0 0;
    }

    .right {
      width: 450px;
      position: absolute;
      right: 0;
      bottom: 23px;
      top: 124px;
      margin-right: 35px;
      order: 3;
      transform-origin: top;
      z-index: 1999;
    }

    .active-button {
      height: 44px;
      width: 132px;
      line-height: 44px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/sec-button.png');
      background-repeat: no-repeat;
    }

    .common-button {
      height: 44px;
      width: 132px;
      line-height: 44px;
      text-align: center;
      margin-right: 10px;
      background-image: url('./assets/carbon/unsec-button.png');
      background-repeat: no-repeat;
    }

    .left-container2-top-select .el-input__inner {
      height: 22px;
      line-height: 22px;
      width: 90px;
      padding: 0;
      background-color: transparent;
      border: none;
      font-size: 15px;
      color: #83C6DF;
      font-weight: 400;
    }
    .left-container2-top-select .el-input__icon {
      width: 20px;
      line-height: 22px;
    }
    .el-popper[x-placement^='bottom'] {
      margin-top: 5px;
    }
    .el-popper {
      background: rgba(10, 37, 51, 0.9);
      border: none;
    }
    .el-select-dropdown__item {
      padding: 0 5px;
    }
    .el-popper .popper__arrow {
      display: none;
    }
    .el-select-dropdown {
      border-radius: 0;
    }
    .el-select-dropdown__item span {
      color: #FFFFFF;
    }
    .el-select-dropdown__item.hover {
      background-color: rgb(23, 79, 107);
    }
    .el-select-dropdown__item.hover {
      color: #83C6DF !important;
      font-weight: 400;
    }
    .el-select-dropdown__item.selected {
      background-color: rgb(23, 79, 107);
    }
    .el-select-dropdown__item.selected span{
      color: #83C6DF !important;
      font-weight: 400;
    }
    .el-select-dropdown__list {
      padding: 8px 0;
    }


    /*中间区域样式*/
    .container {
      width: 100px;
      height: 100px;
    }

    .center-left-data {
      position: absolute;
      top: 124px;
      left: 494px;
    }
    .center-left-data-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
    }
    .center-left-data-item-value {
      height: 47px;
      font-family: 'Roboto-Black';
      font-size: 40px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 900;
      margin-left: 5px;
    }
    .center-left-data-item-line1 {
      margin-top: 7px;
      width: 134px;
      height: 3px;
      background-color: #32F8A2;
    }
    .center-left-data-item-line2 {
      margin-top: 7px;
      width: 134px;
      height: 3px;
      background-color: #66FFFF;
    }
    .center-left-data-item-line3 {
      margin-top: 7px;
      width: 134px;
      height: 3px;
      background-color: #494B59;
    }
    .center-left-data-item-label {
      margin-top: 5px;
      width: 134px;
      height: 26px;
      background: rgba(255,255,255,0.20);
      padding-left: 10px;
      box-sizing: border-box;
      line-height: 26px;
      position: relative;
    }
    .center-left-data-item-process {
      position: absolute;
      width: 40px;
      height: 26px;
      line-height: 26px;
      right: 0;
      top: 0;
      background: #66FFFF;
      font-family: 'Roboto-Black';
      font-size: 16px;
      color: #0D1C31;
      letter-spacing: 0;
      font-weight: 900;
      text-align: center;
    }

    .center-top-select {
      position: absolute;
      top: 124px;
      left: 725px;
      height: 110px;
      display: flex;
      align-items: center;
    }
    .center-top-select-img {
      width: 110px;
      height: 110px;
    }
    .center-top-select-text {
      width: 80px;
      height: 28px;
      font-family: 'PingFangSC-Regular';
      font-size: 20px;
      color: #28D5F3;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
    .center-top-select-station {
      margin-left: 26px;
    }
    .center-top-select-station .el-input__inner {
      height: 41px;
      line-height: 41px;
      width: 227px;
      padding: 14px;
      background-image: linear-gradient(180deg, #03060B 0%, #143058 100%);
      border: 1px solid rgba(59,180,247,0.51);
      border-radius: 2px;
      font-size: 20px;
      color: #FFF;
      font-weight: 400;
    }
    .center-top-select-station .el-input__inner:hover {
      border: 1px solid rgba(59,180,247,0.51);
    }
    .center-top-select-station .el-input__icon {
      width: 20px;
      line-height: 41px;
    }
    .el-select-dropdown {
      background-image: linear-gradient(180deg, #03060B 0%, #143058 100%);
    }
    .center-top-select-button {
      width: 98px;
      height: 41px;
      background-image: linear-gradient(180deg, #03060B 0%, #143058 100%);
      border: 1px solid rgba(59,180,247,1);
      border-radius: 2px;
      margin-left: 18px;
      font-family: 'PingFangSC-Medium';
      font-size: 18px;
      color: #28D9FF;
      letter-spacing: 0;
      line-height: 41px;
      text-align: center;
      cursor: pointer;
    }

    .chart-point-label {
      position: absolute;
      bottom: 177px;
      left: 500px;
      display: flex;
    }
    .chart-point-label-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 13px;
    }
    .chart-point-label-img {
      width: 23px;
      height: 26px;
    }
    .chart-point-label-text {
      margin-top: 6px;
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
    }

    .center-map {
      position: absolute;
      top: 270px;
      left: 503px;
      right: 511px;
    }

    #center-map {
      width: 906px;
      height: 665px;
      margin: 0 auto;
    }

    .el-table {
      width: 1060px;
      background-color: transparent;
    }
    .el-table th.el-table__cell>.cell {
      font-family: 'PingFangSC-Regular';
      color: rgba(212, 237, 253, 0.60);
      font-size: 12px;
      font-weight: 400;
      opacity: 0.9;
    }
    .el-table td.el-table__cell div {
      font-family: 'PingFangSC-Regular';
      font-size: 12px;
      color: rgba(216,240,255,0.80);
      letter-spacing: 0;
      font-weight: 400;
      opacity: 0.9;
    }
    .el-table th.el-table__cell {
      background-color: rgba(21, 77, 160, 0.20);
    }
    .el-table .cell {
      line-height: 18px;
    }
    .el-table tr {
      background-color: transparent;
    }
    .el-table--enable-row-hover .el-table__body tr:hover {
      background-image: linear-gradient(270deg, rgba(26,123,230,0.00) 0%, rgba(62,230,211,0.44) 97%) !important;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: transparent !important;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell div {
      color: #D8F0FF !important;
      font-weight: 500 !important;
      /* font-size: 13px; */
      opacity: 1;
    }
    .el-table td.el-table__cell {
      border-bottom: none;
    }
    .el-table th.el-table__cell.is-leaf {
      border-bottom: none;
    }
    .el-table--small .el-table__cell {
      padding: 6px 0 !important;
    }
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      display: none;
    }
    .el-table::before {
      height: 0;
    }

    .table-pagination {
      float: right;
      margin-top: 2px;
    }
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .el-pager li {
      background: #1C2F35;
      border: 1px solid rgba(217,217,217,0.33);
      color: #FFFFFF;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background: #16CEB9;
    }
    .el-pagination .btn-prev .el-icon {
      font-weight: 500;
    }

    .center-bottom {
      position: absolute;
      bottom: 23px;
      left: 495px;
      right: 505px;
      width: 920px;
      height: 118px;
      background: rgba(2, 2, 2, 0.40);
      padding: 9px 31px 16px 31px;
      box-sizing: border-box;
      z-index: 999;
    }
    .center-container-top {
      height: 34px;
      display: flex;
      padding-bottom: 13px;
    }
    .center-container-top-item {
      width: 60px;
      height: 34px;
      margin-right: 5px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
    }
    .center-container-top-item-active {
      width: 60px;
      height: 34px;
      margin-right: 5px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      background-image: linear-gradient(180deg, rgba(87,171,246,0.20) 0%, rgba(17,205,213,0.00) 100%);
    }
    .center-container-bottom {
      height: 46px;
      width: 100%;
    }
    .center-container-bottom-list {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .center-container-bottom-item {
      height: 46px;
      width: 104px;
      background: rgba(255,255,255,0.11);
      display: flex;
      align-items: center;
    }
    .center-container-bottom-item-img {
      width: 20px;
      height: 20px;
      margin-left: 12px;
    }
    .center-container-bottom-item-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      margin-left: 15px;
    }
    .center-container-bottom-item-data {
      height: 22px;
      font-family: 'PingFangSC-Regular';
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
    }
    .center-container-bottom-item-label {
      height: 17px;
      opacity: 0.7;
      font-family: 'PingFangSC-Regular';
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
    }

    /*中间区域*/

    /* 右侧 */
    .right-container1 {
      width: 450px;
      height: 295px;
      background: rgba(2, 2, 2, 0.40);
      padding-top: 20px;
      box-sizing: border-box;
      position: relative;
    }
    .right-container1-show {
      position: absolute;
      display: flex;
      align-items: center;
      right: 25px;
      top: 22px;
    }
    .right-container1-top {
      margin-left: 27px;
      height: 22px;
      font-family: 'SourceHanSansCN-Bold';
      font-size: 21.33px;
      color: #FFFFFF;
      line-height: 21.33px;
      font-weight: 700;
    }
    .right-container1-split {
      display: flex;
      align-items: center;
      margin: 15px 5px 0 8px;
    }
    .right-container1-circle1 {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(36,104,242,1);
    }
    .right-container1-line {
      width: 430px;
      height: 2px;
      background: rgba(21,43,81,1);
    }
    .right-container1-circle2 {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #3DABE5;
    }
    /* .right-container1-select {
      display: flex;
      margin-top: 13px;
    }
    .right-container1-select-item1 {
      margin-left: 30px;
    }
    .right-container1-select-item2 {
      margin-left: 30px;
    }
    .right-container1-select-item1 .el-input__inner {
      height: 22px;
      line-height: 22px;
      width: 90px;
      padding: 0;
      background-color: transparent;
      border: none;
      font-size: 15px;
      color: #83C6DF;
      font-weight: 400;
    }
    .right-container1-select-item1 .el-input__icon {
      width: 20px;
      line-height: 22px;
    }
    .right-container1-select-item2 .el-input__inner {
      height: 22px;
      line-height: 22px;
      width: 210px;
      padding: 0;
      background-color: transparent;
      border: none;
      font-size: 15px;
      color: #83C6DF;
      font-weight: 400;
    }
    .right-container1-select-item2 .el-input__icon {
      width: 20px;
      line-height: 22px;
    } */
    .light-dataChart {
      height: 210px;
      width: 450px;
    }

    .right-container2 {
      margin-top: 13px;
      width: 450px;
      height: 295px;
      background: rgba(2, 2, 2, 0.40);
      padding-top: 20px;
      box-sizing: border-box;
    }
    .right-container2-top {
      margin-left: 27px;
      height: 22px;
      font-family: 'SourceHanSansCN-Bold';
      font-size: 21.33px;
      color: #FFFFFF;
      line-height: 21.33px;
      font-weight: 700;
    }
    .right-container2-bottom {
      margin-top: 20px;
    }
    .elec-dataChart {
      height: 210px;
      width: 450px;
    }

    .right-container3 {
      margin-top: 35px;
      width: 450px;
      height: 295px;
      background: rgba(2, 2, 2, 0.40);
      padding: 20px 0 25px 0;
      box-sizing: border-box;
    }
    .right-container3-top {
      margin-left: 27px;
      height: 22px;
      font-family: 'SourceHanSansCN-Bold';
      font-size: 21.33px;
      color: #FFFFFF;
      line-height: 21.33px;
      font-weight: 700;
    }
    .right-container3-bottom {
      height: 200px;
    }
    .electric-finish {
      width: 450px;
      height: 222px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="box" id="app">
      <div class="left" v-cloak>
      <!-- <div class="left animate__animated animate__delay-1s animate__bounceInLeft"> -->
        <div class="left-container1">
          <div class="common-top-title">社会贡献</div>
          <div class="left-container1-box">
            <div v-for="(item, index) in leftConList1" :key="index" class="left-container1-box-item">
              <div class="left-container1-box-item-value">{{ item.value }}</div>
              <img :src="item.img" class="left-container1-box-item-img">
              <div class="left-container1-box-item-title">
                <span>{{ item.label }}</span>
                <span>({{ item.unit }})</span>
              </div>
            </div>
          </div>
          <div class="left-container1-line">
            <div class="left-container1-line-item1"></div>
            <div class="left-container1-line-item2"></div>
          </div>
          <div class="left-container1-card">
            <div v-for="(item, index) in leftConList2" :key="index" class="left-container1-card-item">
              <div class="left-container1-card-item-title">{{ item.label }}</div>
              <div class="left-container1-card-item-data">
                <span class="left-container1-card-item-value">{{ item.value }}</span>
                <span class="left-container1-card-item-unit">({{ item.unit }})</span>
              </div>
            </div>
          </div>
        </div>
        <div class="left-container2">
          <div class="left-container2-top">
            <div class="common-top-title">数据概览</div>
            <div class="left-container2-top-select">
              <el-select v-model="selectStatus" @change="chooseStatus">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="left-container2-bottom">
            <el-table :data="showStationData" size="small">
              <el-table-column property="name" label="场站名称" width="150">
                <template slot-scope="{ row, column }">
                  <el-tooltip :content="row.name" placement="top-start">
                    <div v-if="row.name.length > 11">{{ row.name.slice(0, 11) }}...</div>
                    <div v-else>{{ row.name.slice(0, 11) }}</div>
                  </el-tooltip>
                  <!-- <div v-if="row.name.length > 10" :title="row.name">{{ row.name.slice(0, 10) }}...</div>
                  <div v-else>{{ row.name.slice(0, 10) }}</div> -->
                </template>
              </el-table-column>
              <el-table-column property="scale" label="规模MW" width="70" align="center"></el-table-column>
              <el-table-column property="type" label="类型" width="75" align="center"></el-table-column>
              <el-table-column property="location" label="位置" width="75" align="center"></el-table-column>
              <el-table-column property="status" label="状态" width="75" align="center"></el-table-column>
            </el-table>
            <div class="table-pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableTotal"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="center" v-cloak>
        <div class="center-left-data">
          <div class="center-left-data-item">
            <div class="center-left-data-item-value">1</div>
            <div class="center-left-data-item-line1"></div>
            <div class="center-left-data-item-label">已并网电站</div>
          </div>
          <div class="center-left-data-item">
            <div class="center-left-data-item-value">4</div>
            <div class="center-left-data-item-line2"></div>
            <div class="center-left-data-item-label">
              建设中项目
              <div class="center-left-data-item-process">80%</div>
            </div>
          </div>
          <div class="center-left-data-item">
            <div class="center-left-data-item-value">11</div>
            <div class="center-left-data-item-line3"></div>
            <div class="center-left-data-item-label">跟进中项目</div>
          </div>
        </div>
        <div class="center-top-select">
          <img src="./assets/tzbt/select-station.png" class="center-top-select-img">
          <div class="center-top-select-text">选择场站</div>
          <div class="center-top-select-station">
            <el-select v-model="centerStation" @change="chooseCenterStation" clearable placeholder="请选择场站">
              <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="center-top-select-button">查看</div>
          <div class="center-top-select-button">设备总览</div>
        </div>
        <div class="center-map">
          <div id="center-map"></div>
        </div>
        <div class="chart-point-label">
          <div class="chart-point-label-item">
            <img src="./assets/tzbt/point1.png" class="chart-point-label-img">
            <span class="chart-point-label-text">已并网</span>
          </div>
          <div class="chart-point-label-item">
            <img src="./assets/tzbt/point2.png" class="chart-point-label-img">
            <span class="chart-point-label-text">建设中</span>
          </div>
          <div class="chart-point-label-item">
            <img src="./assets/tzbt/point3.png" class="chart-point-label-img">
            <span class="chart-point-label-text">跟进中</span>
          </div>
        </div>
        <div class="center-bottom">
          <div class="center-container-top">
            <div :class="[nowShowType === 'light' ? 'center-container-top-item-active' : 'center-container-top-item']" @click="selectShowType('light')">光伏</div>
            <div :class="[nowShowType === 'wind' ? 'center-container-top-item-active' : 'center-container-top-item']" @click="selectShowType('wind')">风电</div>
            <div :class="[nowShowType === 'energy' ? 'center-container-top-item-active' : 'center-container-top-item']" @click="selectShowType('energy')">储能</div>
          </div>
          <div class="center-container-bottom">
            <div class="center-container-bottom-list">
              <div v-for="(item, index) in centerConList" :key="index" class="center-container-bottom-item">
                <img :src="item.img" class="center-container-bottom-item-img">
                <div class="center-container-bottom-item-right">
                  <div class="center-container-bottom-item-data">{{ item.value }}</div>
                  <div class="center-container-bottom-item-label">{{ item.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="right animate__animated animate__delay-1s animate__bounceInRight"> -->
      <div class="right" v-cloak>
        <div class="right-container1">
          <div class="right-container1-top">光伏场站</div>
          <div class="right-container1-show">
            <img src="./assets/tzbt/icon-blue.png">
            <span style="margin-left: 10px">理论值</span>
            <img src="./assets/tzbt/icon-green.png" style="margin-left: 34px">
            <span style="margin-left: 10px">实际值</span>
          </div>
          <div class="right-container1-split">
            <div class="right-container1-circle1"></div>
            <div class="right-container1-line"></div>
            <div class="right-container1-circle2"></div>
          </div>
          <!-- <div class="right-container1-select">
            <div class="right-container1-select-item1">
              <el-select v-model="rightSelectType1" @change="chooseRightSelectType1">
                <el-option v-for="item in typeOptions1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="right-container1-select-item2">
              <el-select v-model="rightSelectStation1" @change="chooseRightSelectStation1">
                <el-option v-for="item in stationOptions1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div> -->
          <div class="right-container1-bottom">
            <div id="light-dataChart" class="light-dataChart"></div>
          </div>
        </div>
        <div class="right-container2">
          <div class="right-container2-top">风电场站</div>
          <div class="right-container2-bottom">
            <div id="elec-dataChart" class="elec-dataChart"></div>
          </div>
        </div>
        <div class="right-container3">
          <div class="right-container3-top">发电完成概况</div>
          <div class="right-container3-bottom">
            <div id="electric-finish" class="electric-finish"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="./countUp.min.js"></script>
  <script type="text/javascript" src="./echart5.4.3.js"></script>
  <script type="text/javascript" src="./element/vue.js"></script>
  <script type="text/javascript" src="./element/element.js"></script>
  <script type="text/javascript" src="./mapData/chinaMap.json"></script>
  <script type="text/javascript" src="./mapData/tzbtTable.json"></script>
  <script type="text/javascript">
    var rtime;
    var timeout = false;
    var delta = 200;
    window.onload = () => {
      resize();
    };

    function resize() {
      const height = window.outerHeight;
      const app = document.getElementById('app');
      const right = document.querySelector('.right');
      const left = document.querySelector('.left');
      const outer = document.querySelector('.outer');
      const center = document.querySelector('.center');

      const heightPrecent = window.innerHeight / 1080;
      const widthPrecent = window.innerWidth / 1920;
      app.style.scale =
        heightPrecent < widthPrecent ? heightPrecent : widthPrecent;
    }

    function resizeend() {
      if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
      } else {
        timeout = false;
        resize();
      }
    }

    window.addEventListener('resize', (event) => {
      rtime = new Date();
      if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
      }
    });

    new Vue({
      el: '#app',
      data: function () {
        return {
          statusOptions: [],
          stationData: [],
          selectStatus: 0,
          currentPage: 1,
          pageSize: 10,
          tableTotal: 0,
          showStationData: [],
          nowShowType: 'light',
          leftConList1: [],
          leftConList2: [],
          centerConList: [],
          centerStation: '',
          stationOptions: [
            {
              label: '芜湖海立1.1MW分布式光伏项目',
              value: 1
            }
          ]
        };
      },
      created() {
        this.initTableData();
        this.initDataList();
      },
      methods: {
        // 初始化基础数据
        initDataList() {
          this.leftConList1 = [
            {
              label: '发电效益',
              value: 58.47,
              img: './assets/tzbt/left-electric.png',
              unit: '万kWh'
            },
            {
              label: '节约标准煤',
              value: 191.782,
              img: './assets/tzbt/left-coal.png',
              unit: '万吨'
            },
            {
              label: 'CO2减排量',
              value: 582.946,
              img: './assets/tzbt/left-co2.png',
              unit: '万吨'
            }
          ];
          this.leftConList2 = [
            {
              label: '年发电量',
              value: 58.47,
              unit: '亿kWh'
            },
            {
              label: '月发电量',
              value: 4.18,
              unit: '亿kWh'
            },
            {
              label: '日发电量',
              value: 1429.72,
              unit: '万kWh'
            },
            {
              label: '风电容量',
              value: 702.3,
              unit: 'MW'
            },
            {
              label: '光伏容量',
              value: 269.30,
              unit: 'MW'
            },
            {
              label: '储能容量',
              value: 250,
              unit: 'MW'
            },
          ];
          this.statusOptions = [
            {
              label: '全部状态',
              value: 0
            },
            {
              label: '投运中',
              value: 1
            },
            {
              label: '并网在即',
              value: 2
            },
            {
              label: '建设中',
              value: 3
            },
            {
              label: '拟建',
              value: 4
            },
            {
              label: '立项',
              value: 5
            }
          ];
          this.centerConList = [
            {
              label: '正常运行',
              value: 56,
              img: './assets/tzbt/center-img1.png'
            },
            {
              label: '正常停机',
              value: 4,
              img: './assets/tzbt/center-img2.png'
            },
            {
              label: '告警运行',
              value: 0,
              img: './assets/tzbt/center-img3.png'
            },
            {
              label: '限电运行',
              value: 482,
              img: './assets/tzbt/center-img4.png'
            },
            {
              label: '限电停机',
              value: 0,
              img: './assets/tzbt/center-img5.png'
            },
            {
              label: '故障停机',
              value: 0,
              img: './assets/tzbt/center-img6.png'
            },
            {
              label: '外部原因',
              value: 0,
              img: './assets/tzbt/center-img7.png'
            },
            {
              label: '通讯中断',
              value: 0,
              img: './assets/tzbt/center-img8.png'
            }
          ]
        },
        
        // 初始化表格数据
        initTableData() {
          this.stationData = tzbtTable;
          this.tableTotal = this.stationData.length;
          let filterList = [];
          if (this.selectStatus === 0) {
            filterList = this.stationData;
          } else {
            filterList = this.stationData.filter(item => item.value === this.selectStatus);
          }
          const list = filterList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
          this.showStationData.splice(0, this.showStationData.length, ...list);
        },
        
        // 分页修改数据
        handleCurrentChange(val) {
          this.currentPage = val;
          let filterList = [];
          if (this.selectStatus === 0) {
            filterList = this.stationData;
          } else {
            filterList = this.stationData.filter(item => item.value === this.selectStatus);
          }
          const list = filterList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
          this.showStationData.splice(0, this.showStationData.length, ...list);
        },
        
        // 选择状态
        chooseStatus() {
          let filterList = [];
          if (this.selectStatus === 0) {
            filterList = this.stationData;
          } else {
            filterList = this.stationData.filter(item => item.value === this.selectStatus);
          }
          this.currentPage = 1;
          this.tableTotal = filterList.length;
          const list = filterList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
          this.showStationData.splice(0, this.showStationData.length, ...list);
        },
        
        // 选择中间底部展示类型
        selectShowType(type) {
          this.nowShowType = type;
          if (type === 'light') {
            this.centerConList = [
              {
                label: '正常运行',
                value: 56,
                img: './assets/tzbt/center-img1.png'
              },
              {
                label: '正常停机',
                value: 4,
                img: './assets/tzbt/center-img2.png'
              },
              {
                label: '告警运行',
                value: 0,
                img: './assets/tzbt/center-img3.png'
              },
              {
                label: '限电运行',
                value: 482,
                img: './assets/tzbt/center-img4.png'
              },
              {
                label: '限电停机',
                value: 0,
                img: './assets/tzbt/center-img5.png'
              },
              {
                label: '故障停机',
                value: 0,
                img: './assets/tzbt/center-img6.png'
              },
              {
                label: '外部原因',
                value: 0,
                img: './assets/tzbt/center-img7.png'
              },
              {
                label: '通讯中断',
                value: 0,
                img: './assets/tzbt/center-img8.png'
              }
            ]
          } else if (type === 'wind') {
            this.centerConList = [
              {
                label: '正常运行',
                value: 54,
                img: './assets/tzbt/center-img1.png'
              },
              {
                label: '正常停机',
                value: 3,
                img: './assets/tzbt/center-img2.png'
              },
              {
                label: '告警运行',
                value: 0,
                img: './assets/tzbt/center-img3.png'
              },
              {
                label: '限电运行',
                value: 481,
                img: './assets/tzbt/center-img4.png'
              },
              {
                label: '限电停机',
                value: 0,
                img: './assets/tzbt/center-img5.png'
              },
              {
                label: '故障停机',
                value: 0,
                img: './assets/tzbt/center-img6.png'
              },
              {
                label: '外部原因',
                value: 0,
                img: './assets/tzbt/center-img7.png'
              },
              {
                label: '通讯中断',
                value: 0,
                img: './assets/tzbt/center-img8.png'
              }
            ]
          } else if (type === 'energy') {
            this.centerConList = [
              {
                label: '正常运行',
                value: 52,
                img: './assets/tzbt/center-img1.png'
              },
              {
                label: '正常停机',
                value: 2,
                img: './assets/tzbt/center-img2.png'
              },
              {
                label: '告警运行',
                value: 0,
                img: './assets/tzbt/center-img3.png'
              },
              {
                label: '限电运行',
                value: 483,
                img: './assets/tzbt/center-img4.png'
              },
              {
                label: '限电停机',
                value: 0,
                img: './assets/tzbt/center-img5.png'
              },
              {
                label: '故障停机',
                value: 0,
                img: './assets/tzbt/center-img6.png'
              },
              {
                label: '外部原因',
                value: 0,
                img: './assets/tzbt/center-img7.png'
              },
              {
                label: '通讯中断',
                value: 0,
                img: './assets/tzbt/center-img8.png'
              }
            ]
          }
        },
        
        // 选择顶部场站
        chooseCenterStation() {}
      }
    });

    function initMap() {
      let dom = document.getElementById('center-map');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });
      let mapData = {};
      echarts.registerMap('china', chinaMap);
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0)',
          formatter: function(params) {
            if (params.componentSubType === 'scatter') {
              let dataShow = `<div style = "width: 294px;height: 183px;background: rgba(0,0,0,0.80);font-size: 12px;border: 1px dashed rgba(161,203,61,1);color: #ffffff">
                <div style="width: 264px;margin-top: 15px;margin-left: 14px;font-size: 14px;background-image: linear-gradient(270deg, rgba(27,103,96,0.53) 0%, rgba(44,175,221,0.21) 47%, rgba(62,230,211,0.44) 97%);height: 28px;text-align: center;line-height: 28px">
                  ${params.data.name}
                </div>
                <div style="width: 262px;height: 22px;line-height: 22px;margin-left: 14px;margin-top: 6px;border: 1px solid rgba(255,255,255,0.2);border-radius: 2px">
                  <span style="margin-left: 15px;color: #ffffff80">规模</span>
                  <span style="margin-left: 98px;font-size: 14px;color: #A3EC3F">${params.data.scale}</span>
                  <span style="margin-left: 10px;color: #ffffff80">MW</span>
                </div>
                <div style="width: 262px;height: 22px;line-height: 22px;margin-left: 14px;margin-top: 6px;border: 1px solid rgba(255,255,255,0.2);border-radius: 2px">
                  <span style="margin-left: 15px;color: #ffffff80">类型</span>
                  <span style="margin-left: 98px;font-size: 14px;color: #A3EC3F">${params.data.type}</span>
                </div>
                <div style="width: 262px;height: 22px;line-height: 22px;margin-left: 14px;margin-top: 6px;border: 1px solid rgba(255,255,255,0.2);border-radius: 2px">
                  <span style="margin-left: 15px;color: #ffffff80">位置</span>
                  <span style="margin-left: 98px;font-size: 14px;color: #A3EC3F">${params.data.location}</span>
                </div>
                <div style="width: 262px;height: 22px;line-height: 22px;margin-left: 14px;margin-top: 6px;border: 1px solid rgba(255,255,255,0.2);border-radius: 2px">
                  <span style="margin-left: 15px;color: #ffffff80">状态</span>
                  <span style="margin-left: 98px;font-size: 14px;color: #A3EC3F">${params.data.status}</span>
                </div>
                </div>`;
              return dataShow;
            }
          }
        },
        geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: true
            }
          },
          layoutSize: "100%",
          itemStyle: {
            normal: {
              borderColor: '#16CEB9',
              borderWidth: 1,
              shadowColor: '#16CEB9',
              shadowOffsetX: 5,
              shadowOffsetY: 5,
              shadowBlur: 7,
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            label: {
              normal: {
                show: true,
                color: '#fff'
              },
              emphasis: {
                show: false,
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#3E747B'
                    },
                    {
                      offset: 1,
                      color: '#0D5159'
                    }
                  ],
                },
                borderColor: '#001D21',
                borderWidth: 1,
              },
              emphasis: {
                label: {
                  color: '#fff'
                },
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#3E747B'
                    },
                    {
                      offset: 1,
                      color: '#0D5159'
                    }
                  ],
                },
              }
            },
            data: [],
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 18,
            zlevel: 1,
            data: [
              {
                name: '安徽芜湖',
                value: [117.683042, 32.36119],
                symbol: 'image://./assets/tzbt/point1.png',
                index: 1,
                name: "芜湖海立1.1MW分布式光伏项目",
                scale: 1.1,
                type: "光伏",
                location: "安徽芜湖",
                status: "已并网"
              },
              {
                name: '江苏无锡',
                value: [120.183042, 32.76119],
                symbol: 'image://./assets/tzbt/point2.png',
                index: 2,
                name: "无锡透平3.414MWp分布式光伏",
                scale: 3.414,
                type: "光伏",
                location: "江苏无锡",
                status: "建设中"
              },
              {
                name: '吉林长春',
                value: [125.3245, 43.886841],
                symbol: 'image://./assets/tzbt/point2.png',
                index: 3,
                name: "吉林公主岭40.2MW风电",
                scale: 40.2,
                type: "风电",
                location: "吉林长春",
                status: "建设中"
              },
              {
                name: '甘肃张掖',
                value: [99.823557, 39.558039],
                symbol: 'image://./assets/tzbt/point2.png',
                index: 4,
                name: "甘肃张掖二期200MW风电项目",
                scale: 200,
                type: "风电",
                location: "甘肃张掖",
                status: "建设中"
              },
              {
                name: '甘肃瓜州',
                value: [95.623557, 41.558039],
                symbol: 'image://./assets/tzbt/point2.png',
                index: 5,
                name: "甘肃瓜州150MW/300MWh独立储能项目",
                scale: 150,
                type: "储能",
                location: "甘肃瓜州",
                status: "建设中"
              },
              {
                name: '山东临沂',
                value: [119.200923, 36.275807],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 6,
                name: "山东临沂郯城190MW风电",
                scale: 190,
                type: "风电",
                location: "山东临沂",
                status: "跟进中"
              },
              {
                name: '吉林洮南',
                value: [121.8245, 45.886841],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 7,
                name: "洮南22.1MW分散式风电",
                scale: 22.1,
                type: "风电",
                location: "吉林洮南",
                status: "跟进中"
              },
              {
                name: '甘肃临夏',
                value: [103.823557, 36.058039],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 8,
                name: "临夏260MW集中式光伏",
                scale: 260,
                type: "光伏",
                location: "甘肃临夏",
                status: "跟进中"
              },
              {
                name: '吉林白城',
                value: [123.6245, 45.886841],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 9,
                name: "白城市100MW/600MWh共享储能电站",
                scale: 100,
                type: "储能",
                location: "吉林白城",
                status: "跟进中"
              },
              {
                name: '上海',
                value: [121.238737, 30.672559],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 10,
                name: "汽轮机厂1.5544MWp分布式光伏",
                scale: 1.5533,
                type: "光伏",
                location: "上海",
                status: "跟进中"
              },
              {
                name: '上海',
                value: [122.238737, 31.372559],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 11,
                name: "联合滚动轴承2.333MWp分布式光伏",
                scale: 2.333,
                type: "光伏",
                location: "上海",
                status: "跟进中"
              },
              {
                name: '上海',
                value: [123.238737, 30.672559],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 12,
                name: "振华轴承0.899MWp分布式光伏",
                scale: 0.899,
                type: "光伏",
                location: "上海",
                status: "跟进中"
              },
              {
                name: '河北沧州',
                value: [116.702461, 38.645474],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 13,
                name: "河北沧州",
                scale: 50,
                type: "风电",
                location: "河北沧州",
                status: "跟进中"
              },
              {
                name: '吉林白城',
                value: [123.8245, 45.286841],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 14,
                name: "吉林白城",
                scale: 200,
                type: "风电",
                location: "吉林白城",
                status: "跟进中"
              },
              {
                name: '吉林洮南',
                value: [122.0245, 45.286841],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 15,
                name: "吉林洮南",
                scale: 680,
                type: "风电绿化",
                location: "吉林洮南",
                status: "跟进中"
              },
              {
                name: '新疆哈密',
                value: [94.617733, 43.792818],
                symbol: 'image://./assets/tzbt/point3.png',
                index: 16,
                name: "新疆",
                scale: 1000,
                type: "风光氢",
                location: "新疆哈密",
                status: "跟进中"
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
    initMap();

    // 右侧图表-1
    function initRightContainer1(xData, yData1, yData2) {
      var chartDom = document.getElementById('light-dataChart');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#0066FF85', '#16CEB985'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name.split(' ')[1]}</span> <br>
                  ${item.marker}    ${item.seriesName}：${item.value.toFixed(2)} MW  <br>`;
              } else {
                tip += `${item.marker}    ${item.seriesName}：${item.value.toFixed(2)} MW  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 15,
          top: 25,
          right: 15,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ["2023-11-20 00:00:00","2023-11-20 00:15:00","2023-11-20 00:30:00","2023-11-20 00:45:00","2023-11-20 01:00:00","2023-11-20 01:15:00","2023-11-20 01:30:00","2023-11-20 01:45:00","2023-11-20 02:00:00","2023-11-20 02:15:00","2023-11-20 02:30:00","2023-11-20 02:45:00","2023-11-20 03:00:00","2023-11-20 03:15:00","2023-11-20 03:30:00","2023-11-20 03:45:00","2023-11-20 04:00:00","2023-11-20 04:15:00","2023-11-20 04:30:00","2023-11-20 04:45:00","2023-11-20 05:00:00","2023-11-20 05:15:00","2023-11-20 05:30:00","2023-11-20 05:45:00","2023-11-20 06:00:00","2023-11-20 06:15:00","2023-11-20 06:30:00","2023-11-20 06:45:00","2023-11-20 07:00:00","2023-11-20 07:15:00","2023-11-20 07:30:00","2023-11-20 07:45:00","2023-11-20 08:00:00","2023-11-20 08:15:00","2023-11-20 08:30:00","2023-11-20 08:45:00","2023-11-20 09:00:00","2023-11-20 09:15:00","2023-11-20 09:30:00","2023-11-20 09:45:00","2023-11-20 10:00:00","2023-11-20 10:15:00","2023-11-20 10:30:00","2023-11-20 10:45:00","2023-11-20 11:00:00","2023-11-20 11:15:00","2023-11-20 11:30:00","2023-11-20 11:45:00","2023-11-20 12:00:00","2023-11-20 12:15:00","2023-11-20 12:30:00","2023-11-20 12:45:00","2023-11-20 13:00:00","2023-11-20 13:15:00","2023-11-20 13:30:00","2023-11-20 13:45:00","2023-11-20 14:00:00","2023-11-20 14:15:00","2023-11-20 14:30:00","2023-11-20 14:45:00","2023-11-20 15:00:00","2023-11-20 15:15:00","2023-11-20 15:30:00","2023-11-20 15:45:00","2023-11-20 16:00:00","2023-11-20 16:15:00","2023-11-20 16:30:00","2023-11-20 16:45:00","2023-11-20 17:00:00","2023-11-20 17:15:00","2023-11-20 17:30:00","2023-11-20 17:45:00","2023-11-20 18:00:00","2023-11-20 18:15:00","2023-11-20 18:30:00","2023-11-20 18:45:00","2023-11-20 19:00:00","2023-11-20 19:15:00","2023-11-20 19:30:00","2023-11-20 19:45:00","2023-11-20 20:00:00","2023-11-20 20:15:00","2023-11-20 20:30:00","2023-11-20 20:45:00","2023-11-20 21:00:00","2023-11-20 21:15:00","2023-11-20 21:30:00","2023-11-20 21:45:00","2023-11-20 22:00:00","2023-11-20 22:15:00","2023-11-20 22:30:00","2023-11-20 22:45:00","2023-11-20 23:00:00","2023-11-20 23:15:00","2023-11-20 23:30:00","2023-11-20 23:45:00"],
          axisLabel: {
            // show: false,
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
            formatter: function (params){
              const list = params.split(' ');
              const list1 = list[1].split(':');
              return list1[0];
            }
          },
          // splitLine: {
          //   lineStyle: {
          //     type: 'dotted',
          //     color: '#8097B176',
          //   },
          //   show: true,
          // },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#FFFFFF80',
            padding: [0, 0, 0, -35],
          },
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#8097B176',
            },
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            name: '理论值',
            data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.178738116829258,1.58656610585768,5.17845812764542,10.5299254622612,18.0005226911482,27.8546371076691,33.9731238706061,43.9923449286424,63.1668603445757,75.7380921312926,90.4701726301323,108.550891108313,111.281513219817,123.682641855961,133.633088355097,143.474308405378,136.644890586152,150.017042897187,147.541325721956,160.263574153263,160.091294607352,152.148898980166,152.812646605039,157.220065856235,141.731702332162,136.074940090123,134.048281827646,122.527233303769,122.460252551272,111.355485163553,101.222212740319,85.8484625437175,83.7745619492557,55.0920658450513,44.9853610935596,34.6228532349658,15.6639889949659,8.09502671307589,7.44054707901238,2.41123940719184,0.257878977492705,0.0018291416058228,0.00187734180653504,0.00197733065034509,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0],
            type: 'line',
            symbol: 'none',
            lineStyle: {
              width: 5
            }
          },
          {
            name: '实际值',
            data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.168622467771639,1.57891947095262,4.76230727161114,9.89311925888721,17.7068619900664,26.5963619621631,33.094188180144,41.6235995312238,57.9772737317931,74.0817714158156,88.0311477202969,101.028303030303,110.655714158156,119.569861264579,123.820590211507,130.78821485574,136.150168871031,140.573127183437,143.275895864725,146.682310173559,147.570809308555,144.755024499135,145.71776561192,143.625464367431,138.738719124951,133.229784028127,127.638792008483,121.737306211284,114.964454043194,107.701664936659,95.5975173837826,79.3700846029354,77.7578013281991,52.4644311624533,41.2109103186562,31.7911963837268,15.5697750990569,8.04278073553212,7.19936782186506,2.23838060159607,0.253384563870752,0.00180344885317261,0.00180344885317261,0.00180344885317261,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0],
            type: 'line',
            symbol: 'none',
            lineStyle: {
              width: 5
            }
          }
        ],
      };
      option && myChart.setOption(option);
    }
    initRightContainer1();

    // 右侧图表-2
    function initRightContainer2(xData, yData1, yData2) {
      var chartDom = document.getElementById('elec-dataChart');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#0066FF85', '#16CEB985'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name.split(' ')[1]}</span> <br>
                  ${item.marker}    ${item.seriesName}：${item.value.toFixed(2)} MW  <br>`;
              } else {
                tip += `${item.marker}    ${item.seriesName}：${item.value.toFixed(2)} MW  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 15,
          top: 25,
          right: 15,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ["2023-11-20 00:00:00","2023-11-20 00:15:00","2023-11-20 00:30:00","2023-11-20 00:45:00","2023-11-20 01:00:00","2023-11-20 01:15:00","2023-11-20 01:30:00","2023-11-20 01:45:00","2023-11-20 02:00:00","2023-11-20 02:15:00","2023-11-20 02:30:00","2023-11-20 02:45:00","2023-11-20 03:00:00","2023-11-20 03:15:00","2023-11-20 03:30:00","2023-11-20 03:45:00","2023-11-20 04:00:00","2023-11-20 04:15:00","2023-11-20 04:30:00","2023-11-20 04:45:00","2023-11-20 05:00:00","2023-11-20 05:15:00","2023-11-20 05:30:00","2023-11-20 05:45:00","2023-11-20 06:00:00","2023-11-20 06:15:00","2023-11-20 06:30:00","2023-11-20 06:45:00","2023-11-20 07:00:00","2023-11-20 07:15:00","2023-11-20 07:30:00","2023-11-20 07:45:00","2023-11-20 08:00:00","2023-11-20 08:15:00","2023-11-20 08:30:00","2023-11-20 08:45:00","2023-11-20 09:00:00","2023-11-20 09:15:00","2023-11-20 09:30:00","2023-11-20 09:45:00","2023-11-20 10:00:00","2023-11-20 10:15:00","2023-11-20 10:30:00","2023-11-20 10:45:00","2023-11-20 11:00:00","2023-11-20 11:15:00","2023-11-20 11:30:00","2023-11-20 11:45:00","2023-11-20 12:00:00","2023-11-20 12:15:00","2023-11-20 12:30:00","2023-11-20 12:45:00","2023-11-20 13:00:00","2023-11-20 13:15:00","2023-11-20 13:30:00","2023-11-20 13:45:00","2023-11-20 14:00:00","2023-11-20 14:15:00","2023-11-20 14:30:00","2023-11-20 14:45:00","2023-11-20 15:00:00","2023-11-20 15:15:00","2023-11-20 15:30:00","2023-11-20 15:45:00","2023-11-20 16:00:00","2023-11-20 16:15:00","2023-11-20 16:30:00","2023-11-20 16:45:00","2023-11-20 17:00:00","2023-11-20 17:15:00","2023-11-20 17:30:00","2023-11-20 17:45:00","2023-11-20 18:00:00","2023-11-20 18:15:00","2023-11-20 18:30:00","2023-11-20 18:45:00","2023-11-20 19:00:00","2023-11-20 19:15:00","2023-11-20 19:30:00","2023-11-20 19:45:00","2023-11-20 20:00:00","2023-11-20 20:15:00","2023-11-20 20:30:00","2023-11-20 20:45:00","2023-11-20 21:00:00","2023-11-20 21:15:00","2023-11-20 21:30:00","2023-11-20 21:45:00","2023-11-20 22:00:00","2023-11-20 22:15:00","2023-11-20 22:30:00","2023-11-20 22:45:00","2023-11-20 23:00:00","2023-11-20 23:15:00","2023-11-20 23:30:00","2023-11-20 23:45:00"],
          axisLabel: {
            // show: false,
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
            formatter: function (params){
              const list = params.split(' ');
              const list1 = list[1].split(':');
              return list1[0];
            }
          },
          // splitLine: {
          //   lineStyle: {
          //     type: 'dotted',
          //     color: '#8097B176',
          //   },
          //   show: true,
          // },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#FFFFFF80',
            padding: [0, 0, 0, -35],
          },
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#8097B176',
            },
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            name: '理论值',
            data: [589.24,565.218003813927,616.86002012676,645.650842114804,665.959015640786,703.517645339572,771.153012608559,740.705815426599,676.225856077128,631.631389444179,670.530486223166,637.092757263515,673.807817897999,647.315438601563,571.235778945741,573.16195731904,526.147505546386,541.637735234116,540.835137075812,518.151824203373,557.583936347923,549.122842985834,509.55527813826,513.996266874846,508.978858407013,534.424464130633,498.651979814314,526.912013028117,511.182814661158,540.377958738073,547.958714452158,556.666347966899,541.219627584074,556.633045103165,558.508891774517,582.090227244346,642.759910838921,598.665895882318,645.445540861266,681.459294490317,653.745562134521,618.740442301961,613.013436375525,588.887236403947,571.230937364202,555.855153775956,539.777904588683,522.863158717522,482.118554495465,487.59996733851,480.489478730551,442.882215398499,528.58558061682,538.284439797008,487.194611198571,514.139411512935,451.971846146215,443.725069858268,502.456840143421,536.448117417271,520.360861613326,463.254926574899,445.005601348559,432.880553878934,431.395364381992,441.245232898221,492.367640718301,529.801319920519,531.820284851137,590.698776978162,565.247320011598,584.203883541815,549.654489203822,528.050137310833,568.240177020833,603.542706208504,542.094201230219,539.152225500281,551.802191306538,524.896495115927,520.949997123355,525.486195930665,498.726680930671,460.520323967771,424.613793551156,396.46265315555,350.551911500161,346.071715955599,317.92013137998,302.835913767724,273.671286581807,274.204868347598,297.203085160976,310.960518402228,334.856758715186,360.47687013422],
            type: 'line',
            symbol: 'none',
            lineStyle: {
              width: 5
            }
          },
          {
            name: '实际值',
            data: [556.60,548.533333333333,580.8,613.066666666667,645.333333333333,693.733333333333,726.0,677.6,669.533333333333,629.2,621.133333333333,605.0,629.2,596.933333333333,564.666666666667,524.333333333333,516.266666666667,516.266666666667,500.133333333333,504.166666666667,508.2,500.133333333333,488.033333333333,492.066666666667,500.133333333333,502.553333333333,492.066666666667,508.2,508.2,492.066666666667,500.133333333333,508.2,512.233333333333,524.333333333333,544.5,564.666666666667,588.866666666667,593.706666666667,629.2,645.333333333333,629.2,605.0,580.8,540.466666666667,532.4,516.266666666667,508.2,484.0,475.933333333333,445.28,479.16,421.886666666667,526.753333333333,509.813333333333,484.0,467.866666666667,427.533333333333,429.146666666667,475.933333333333,508.2,484.0,435.6,427.533333333333,403.333333333333,400.106666666667,435.6,459.8,484.0,508.2,540.466666666667,556.6,540.466666666667,508.2,508.2,548.533333333333,556.6,524.333333333333,516.266666666667,508.2,512.233333333333,504.166666666667,496.1,484.0,427.533333333333,403.333333333333,387.2,338.8,330.733333333333,298.466666666667,282.333333333333,266.2,266.2,274.266666666667,290.4,322.666666666667,338.8],
            type: 'line',
            symbol: 'none',
            lineStyle: {
              width: 5
            }
          }
        ],
      };
      option && myChart.setOption(option);
    }
    initRightContainer2();

    // 右侧图表-3
    function initRightContainer3(xData, yData1, yData2) {
      var chartDom = document.getElementById('electric-finish');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#2CC2B7', '#FF9F0B'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'dotted',
              color: '#FFFFFF20',
            },
          },
          formatter: function (params) {
            console.log(params, 11);
            let tip = '<div style="font-size:14px;">';
            params.forEach((item, index) => {
              if (index === 0) {
                tip += `<span>${item.name}</span> <br>
                ${item.marker}  ${item.seriesName}：${item.value.toFixed(2)}  <br>`;
              } else {
                tip += `${item.marker}  ${item.seriesName}：${item.value.toFixed(2)}  <br>`;
              }
            });
            tip += `</div>`;
            return tip;
          },
        },
        grid: {
          bottom: 5,
          left: 20,
          top: 45,
          right: 20, 
          containLabel: true,
        },
        legend: {
          data: [
            {
              name: '实际完成',
              textStyle: {
                color: '#FFFFFF',
                padding: [3, 0, 0, 0]
              },
              icon: `image://./assets/tzbt/icon-green.png`
            },
            {
              name: '计划完成',
              textStyle: {
                color: '#FFFFFF',
                padding: [3, 0, 0, 0]
              },
              icon: `image://./assets/tzbt/icon-orange.png`
            }
          ],
          // data: ['实际完成', '计划完成'],
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          top: 0,
          right: 10
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['2023年1月','2023年2月','2023年3月','2023年4月','2023年5月','2023年6月','2023年7月','2023年8月','2023年9月','2023年10月','2023年11月','2023年12月'],
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
            formatter: function (params){
              const list = params.split('年');
              return list[1];
            }
          },
          // splitLine: {
          //   lineStyle: {
          //     type: 'dotted',
          //     color: '#8097B176',
          //   },
          //   show: true,
          // },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#FFFFFF80',
            padding: [0, 0, 0, -35],
          },
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#97A4BA',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#8097B176',
            },
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#424B5F',
              width: 1,
            },
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            name: '实际完成',
            data: [22758.6338008215,23434.9406029237,38330.2926420694,51517.0688059336,60362.8622826965,49693.1433814138,53629.9458206327,37926.3407277949,28452.9969502993,27049.0405116742,33260.680203272,19578.8801784301],
            type: 'bar',
            barWidth: 10
            // symbol: 'circle',
            // smooth: true,
            // symbolSize: 5,
            // itemStyle: {
            //   borderColor: '#FF9F0B',
            //   borderWidth: 10,
            //   color: '#0C2147'
            // },
            // lineStyle: {
            //   color: '#FF9F0B',
            //   width: 5
            // }
          },
          {
            name: '计划完成',
            data: [25207.2626151381,28677.6897690801,49352.1610362503,55594.7067770557,68081.5555467834,51369.3078235628,62339.6038289197,40133.7076618769,31765.0198885188,29247.0831522103,42274.4437475146,23523.1143369469],
            type: 'line',
            // symbol: 'circle',
            smooth: true
            // symbolSize: 5,
            // itemStyle: {
            //   borderColor: '#2CC2B7',
            //   borderWidth: 10,
            //   color: '#0C2147'
            // },
            // lineStyle: {
            //   color: '#2CC2B7',
            //   width: 5
            // }
          }
        ],
      };
      myChart.setOption(option);
    }
    initRightContainer3();

  </script>
</body>

</html>